<template>
  <div class="my-component"></div>
</template>
<script>
let microAppContainer = null
let oldParentContainer = null
export default {
  name: '',
  data() {
    return {}
  },
  methods: {
    appendMicroContainer(container) {
      microAppContainer = microAppContainer || document.getElementById('microapp')
      microAppContainer.style.zIndex = 'auto'
      oldParentContainer = microAppContainer.parentElement || microAppContainer.parentNode
      container.appendChild(microAppContainer)
    },
    isInPage(node) {
      return node === document.body ? false : document.body.contains(node)
    },
    releaseMicroContainer() {
      microAppContainer = microAppContainer || document.getElementById('microapp')
      this.isInPage(oldParentContainer) ? oldParentContainer.appendChild(microAppContainer) : ((microAppContainer.style.zIndex = -1), document.body.appendChild(microAppContainer))
    },
  },

  mounted() {
    this.appendMicroContainer(this.$el)
  },
  beforeDestroy() {
    this.releaseMicroContainer()
  },
}
</script>
<style scoped lang="scss"></style>
